<template>
  <view>
    <nav-bar :leftSlot="true" backgroundColor="#115BAA">
      <template slot="leftSlot">
        <view class="nav-title">
          <image
            class="left-img"
            :src="baseIconUrl + '/commonIcon/icon_about_logo.png'"
          />武汉市青少年脊柱健康技术中心
        </view>
      </template>
    </nav-bar>
    <view class="top-box">
      <view class="swiper-box">
        <uni-swiper-dot
          class="uni-swiper-dot-box"
          @clickItem=clickItem
          :info="bannerList"
          :current="current"
          :mode="mode"
          :dots-styles="dotsStyles"
          field="content"
        >
          <swiper class="swiper-list" @change="change" :current="swiperDotIndex">
            <swiper-item v-for="(item, index) in bannerList" :key="index">
              <view class="swiper-item" :class="'swiper-item' + index">
                <image
                  class="swiper-img"
                  :src="item.img"
                  mode="aspectFill"
                />
              </view>
            </swiper-item>
          </swiper>
        </uni-swiper-dot>
      </view>
      <view class="todo-notice">
        <view class="title-box">
          <view class="todo-title">待办事项</view>
          <view class="more-box" @click="clickMoreToDo">
            更多<uni-icons class="more-icon" type="right" color="#999" size="12"></uni-icons>
          </view>
        </view>
        <view class="notice-box">
          <view class="notice-item" v-for="(item, index) in noticeList" :key="index">
            <uni-icons class="notice-icon" type="sound-filled" color="#115BAA" size="18"></uni-icons>
            <view class="content">{{ item.title }}</view>
            <view class="time">{{ item.createTime }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="list-title">
      <view class="title">最近患者</view>
      <view class="more-box" @click="clickMorePatient">
        更多<uni-icons class="more-icon" type="right" color="#999" size="12"></uni-icons>
      </view>
    </view>
    <scroll-view scroll-y :style="{ height: listHeight }" class="patient-box">
      <view v-if="isLoading" class="common-loading">
        <image class="loading-img" :src="baseIconUrl + '/commonIcon/icon_loading.png'" />
        正在加载数据，请稍后......
      </view>
      <view class="common-no-data" v-else-if="!patientList || patientList.length === 0">
        <image class="no-data-img" :src="baseIconUrl + '/commonIcon/icon_no_data.png'" />
        <view class="text">您还没有患者哦~</view>
      </view>
      <view v-else>
        <view
          class="patient-item"
          v-for="(item, index) in patientList"
          :key="index"
          @click="clickPatient(item)"
        >
          <view class="info-box">
            <view class="left-info">
              <view class="img" v-if="item.userPhoto">
                <image
                  class="user-img"
                  :src="item.userPhoto"
                  mode="aspectFill"
                />
              </view>
              <view class="name">{{ item.name }}</view>
              <view class="sex">{{ item.sex ? item.sex === 1 ? '男' : '女' : '未知' }}</view>
              <view class="age">{{ item.age || '--' }}岁</view>
            </view>
            <view class="patient-time">{{ item.createDate }}</view>
          </view>
          <view class="other-info">
            <view class="other-item" v-for="(oItem, oIndex) in otherConfig" :key="oIndex">
              <view class="other-label">{{ oItem.label }}：</view>
              <view class="other-value">{{ item[oItem.key] || '暂无' }}{{ oItem.unit || '' }}</view>
            </view>
          </view>
          <!-- <view class="bottom-btn">
            <view class="status" :style="{ color: statusConfig[item.status].color }">{{ statusConfig[item.status].text }}</view>
            <view class="btn">联系</view>
          </view> -->
        </view>
      </view>
    </scroll-view>
    <tab-bar :selectedIndex="0"></tab-bar>
  </view>
</template>

<script>
  import api_common from '@/api/common.js'
  import api_physician from '@/api/physician.js'
  import { baseUrl, baseIconUrl } from '@/config'
  export default {
    name: 'PhysicianIndex',
    data() {
      return {
        baseUrl,
        baseIconUrl,
        bannerList: [],
        noticeList: [],
        listHeight: '',
        patientList: [],
        otherConfig: [
          { label: '购买服务', key: 'buyService' },
          { label: '有效期限', key: 'validTime', unit: '个月' },
          { label: '病情描述', key: 'medicineDesc' }
        ],
        statusConfig: {
          0: { text: '未联系', color: '#4B84D4' }
        },
        isLoading: false
      }
    },
    onShow() {
      uni.hideTabBar()
      this.listHeight = this.$store.getters.heightData.mainHeight - 370 + 'px'
      this.getBannerList()
      this.getMessageList()
      this.getMedicinesList()
    },
    methods: {
      getBannerList() {
        this.isLoading = true
        api_common.fetchBannerList().then(res => {
          if (res.code !== 200) return
          this.bannerList = res.rows.map(item => {
            return {
              ...item,
              img: item.img.includes('http') ? item.img : this.baseUrl + item.img
            }
          })
          this.isLoading = false
        })
      },
      getMessageList() {
        const params = {
          pageNum: 1,
          pageSize: 10
        }
        api_physician.fetchMessageList(params).then(res => {
          if (res.code !== 200) return
          this.noticeList = res.rows.slice(0, 2)
        })
      },
      getMedicinesList() {
        api_physician.fetchMedicinesList().then(res => {
          if (res.code !== 200) return
          this.patientList = res.rows.map(item => {
            const userPhoto = item.baUser.userPhoto
            return {
              ...item,
              userPhoto: userPhoto && userPhoto.includes('http') ? userPhoto : this.baseUrl + userPhoto
            }
          }).slice(0, 5)
        })
      },
      clickPatient(item) {
        uni.navigateTo({
          url: `/subPages/physicianTrainPlan/patient/patientDetail?medicineId=${item.id}`
        })
      },
      // 更多待办
      clickMoreToDo() {
        uni.navigateTo({
          url: '/subPages/physicianMine/myResource/messagePage'
        })
      },
      // 更多患者
      clickMorePatient() {
        uni.navigateTo({
          url: '/subPages/physicianTrainPlan/patient/myPatient'
        })
      }
    }
  }
</script>
<style lang="scss">
  .nav-title {
    display: flex;
    align-items: center;
    margin-left: 30rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #FFF;
    .left-img {
      width: 48rpx;
      height: 48rpx;
      margin-right: 6rpx;
    }
  }
  .more-box {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #999;
    .more-icon {
      margin-left: 10rpx;
    }
  }
  .top-box {
    padding: 10px 30rpx 0;
    background: linear-gradient(to bottom, #115BAA, transparent);
    .swiper-box {
      height: 170px;
      border-radius: 32rpx;
      overflow: hidden;
      .swiper-list {
        width: 100%;
        height: 320rpx;
        border-radius: 32rpx;
        overflow: hidden;
        .swiper-item {
          width: 100%;
          height: 320rpx;
          border-radius: 32rpx;
          overflow: hidden;
          .swiper-img {
            width: 100%;
            height: 100%;
            border-radius: 32rpx;
          }
        }
      }
    }
    .todo-notice {
      height: 120px;
      margin: 10px 0;
      padding: 30rpx 30rpx 0;
      border-radius: 16rpx;
      background-color: #FFF;
      .title-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .todo-title {
          font-size: 28rpx;
          font-weight: 500;
        }
      }
      .notice-box {
        margin-top: 15px;
        .notice-item {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          .notice-icon {
            margin-right: 8rpx;
          }
          .content {
            flex: 1;
            width: 0;
            white-space: nowrap; /* 不换行 */
            overflow: hidden; /* 隐藏溢出部分 */
            text-overflow: ellipsis; /* 显示省略号 */
          }
          .time {
            color: #999;
          }
        }
      }
    }
  }
  .list-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding: 0 30rpx;
    .title {
      font-size: 32rpx;
      font-weight: 500;
    }
  }
  .patient-box {
    padding: 0 30rpx 20rpx;
    .patient-item {
      margin-bottom: 20rpx;
      padding: 30rpx 30rpx 20rpx;
      border-radius: 16rpx;
      background-color: #FFF;
      .info-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left-info {
          display: flex;
          align-items: center;
          .img {
            width: 60rpx;
            height: 60rpx;
            border-radius: 30rpx;
            overflow: hidden;
            .user-img {
              width: 100%;
              height: 100%;
            }
          }
          .name {
            margin-left: 10rpx;
            font-size: 32rpx;
            font-weight: 500;
            color: #333;
          }
          .sex,
          .age {
            margin-left: 20rpx;
            color: #666;
          }
        }
        .patient-time {
          color: #999;
          font-size: 24rpx;
        }
      }
      .other-info {
        margin: 20rpx 0;
        padding: 20rpx;
        border-radius: 12rpx;
        background-color: #f8f8f8;
        .other-item {
          display: flex;
          margin-bottom: 8rpx;
          font-size: 24rpx;
          color: #666;
          .other-label {
            width: 124rpx;
          }
          .other-value {
            flex: 1;
            width: 0;
            white-space: nowrap; /* 不换行 */
            overflow: hidden; /* 隐藏溢出部分 */
            text-overflow: ellipsis; /* 显示省略号 */
          }
        }
      }
      .bottom-btn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .btn {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 60rpx;
          padding: 0 36rpx;
          border-radius: 30rpx;
          color: #FFF;
          background-color: #115baa;
        }
        
      }
    }
  }
</style>